<template>
	<view class="container">
		<u-swiper :list="list" mode="number" height="880" border-radius="0" img-mode="widthFix"></u-swiper>
		<view class="content">
			<view class="text">合成进度（库存：323件）</view>
			<view class="progress">
				<u-line-progress active-color="#e7b15d" inactive-color="#693207" :height="50" :round="false"
					:percent="70" :striped="true" :striped-active="true"></u-line-progress>
			</view>
			<view class="fl">
				<view class="word_art">当前炫酷石（8172132）</view>
				<image src="/static/images/fx.png" />
			</view>
			<view class="info">
				<view class="title">
					<image src="/static/images/Frame.png" />
					<text>商品参数</text>
				</view>
				<view class="pre">价格{{newdata.price}}</view>
			</view>
		</view>
		<view class="desc">
			<image mode="widthFix" :src="list[0]" />
		</view>
		<view class="confirm-btn">
			<!-- 立即合成按钮 -->
			<image v-if="true" mode="widthFix" src="/static/images/Group 1410105077.png" @click="showPop" />
			<view v-else class="grey-btn">
				<text>还差150炫酷石，立即兑换</text>
			</view>
		</view>
		<u-popup mode="center" border-radius="8" v-model="show">
			<view class="pop-box">
				<view class="header">
					<image class="bg" mode="widthFix" src="/static/images/Group 1410105122.png" />
					<text class="title">确认合成</text>
					<image class="gb" src="/static/images/gb.png" @click="show = false" />
				</view>
				<view class="content">
					<view class="address_card">
						<view class="left">
							<view class="address">山西省太原市清徐县东于镇方山村</view>
							<view class="user">贾是咯 120977494567</view>
						</view>
						<image class="right" mode="widthFix" src="/static/images/mine_rj.png" />
					</view>
					<view class="pre">{{newdata.title}}</view>
					<view class="btn_box">
						<view class="cancel" @click="show = false">
							<text>取消</text>
						</view>
						<view class="confirm" @click="confirmEvent">
							<text>同意并合成</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: "https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
					},
					{
						image: "https://img0.baidu.com/it/u=2191392668,814349101&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1399",
					},
					{
						image: "https://wx3.sinaimg.cn/mw690/88e90961ly1hwvqdknjo4j20u0140tav.jpg",
					},
				],
				show: false,
				newdata: {}
			}
		},
		onLoad(e) {
			this.getDetial(e.id)
		},
		methods: {
			showPop() {
				this.show = true
			},
			confirmEvent() {
				this.show = false
			},
			getDetial(id) {
				this.req({
					url: "/v1/shop/info",
					data: {
						id: id
					},
					Loading: false,
					success: (res) => {
						if (res.code == 200) {
							this.list = res.data.thumb
							this.newdata = res.data
						}
					},
					complete: () => {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true,
						});
					},
				});
			},
		}
	}
</script>

<style  scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(to bottom, #FFF2D8, #EFD8AB);
		overflow-y: scroll;

		.content {
			padding: 30rpx 20rpx;

			.text {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 32rpx;
				color: #241518;
			}

			.progress {
				margin-top: 20rpx;
				background: #693307;
				box-shadow: inset 0rpx 0rpx 28rpx 0rpx rgba(0, 0, 0, 0.67);
				border-radius: 11rpx 11rpx 11rpx 11rpx;
				border: 5rpx solid #C48636;
			}

			.fl {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 80rpx;
					height: 92rpx;
				}
			}

			.word_art {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				font-size: 48rpx;
				color: #241518;
				text-align: left;
				font-style: normal;
				text-transform: none;
				background: -webkit-linear-gradient(1.68deg, #D47516 0%, #C92828 20%, #CE9720 47%, #C92828 73%, #D47516 100%);
				/* Safari 5.1 到 13.0 */
				background: -o-linear-gradient(1.68deg, #D47516 0%, #C92828 20%, #CE9720 47%, #C92828 73%, #D47516 100%);
				/* Opera 11.1 到 12.0 */
				background: -moz-linear-gradient(1.68deg, #D47516 0%, #C92828 20%, #CE9720 47%, #C92828 73%, #D47516 100%);
				/* Firefox 3.6 到 15 */
				background: linear-gradient(to 1.68deg, #D47516 0%, #C92828 20%, #CE9720 47%, #C92828 73%, #D47516 100%);
				/* 标准的语法 */
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.info {
				margin-top: 30rpx;
				padding: 40rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 4rpx solid #1D1D1D;

				.title {
					display: flex;
					align-items: center;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;

					image {
						width: 46rpx;
						height: 46rpx;
						margin-right: 10rpx;
					}
				}

				.pre {
					margin-top: 40rpx;
				}
			}
		}

		.desc {
			margin-top: 30rpx;

			image {
				width: 100%;
			}
		}

		.confirm-btn {
			width: 100%;
			padding: 40rpx 20rpx;
			display: flex;
			align-items: center;

			image {
				width: 100%;
			}

			.grey-btn {
				width: 100%;
				height: 100rpx;
				background: #D9D9D9;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				border: 4rpx solid #1D1D1D;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
					font-weight: 400;
					font-size: 37rpx;
					color: #FFFFFF;
					text-shadow:
						-2px -2px 0 #000,
						2px -2px 0 #000,
						-2px 2px 0 #000,
						2px 2px 0 #000;
					/* 黑色描边 */

				}
			}
		}

		.pop-box {
			width: 670rpx;
			background: #F88802;
			border-radius: 10rpx;
			border: 6rpx solid #F88802;

			.header {
				width: 100%;
				height: 112rpx;
				position: relative;

				.bg {
					width: 100%;
				}

				.title {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
					font-weight: 400;
					font-size: 36rpx;
					color: #FFFFFF;
					text-shadow:
						-2px -2px 0 #000,
						2px -2px 0 #000,
						-2px 2px 0 #000,
						2px 2px 0 #000;
					/* 黑色描边 */
				}

				.gb {
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 50%;
					right: 30rpx;
					transform: translateY(-50%);
				}
			}

			.content {
				height: 760rpx;
				background: #EEECD3;
				padding: 30rpx;
				overflow-y: scroll;

				.address_card {
					padding: 24rpx;
					background: #FFF2D8;
					border-radius: 16rpx;
					border: 4rpx solid #1D1D1D;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.address {
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
					}

					.user {
						margin-top: 10rpx;
						font-family: Source Han Sans CN, Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: rgba(0, 0, 0, 0.6);
					}

					.right {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.pre {
					margin-top: 40rpx;
					word-wrap: break-word;
				}

				.btn_box {
					margin-top: 50rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.cancel {
						width: 280rpx;
						height: 80rpx;
						background: #FFB74B;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 4rpx solid #1D1D1D;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.confirm {
						width: 280rpx;
						height: 80rpx;
						background: #F36058;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						border: 4rpx solid #1D1D1D;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					text {
						font-family: FZHeiJinGangTiS, FZHeiJinGangTiS;
						font-weight: 400;
						font-size: 36rpx;
						color: #FFFFFF;
						text-shadow:
							-2px -2px 0 #000,
							2px -2px 0 #000,
							-2px 2px 0 #000,
							2px 2px 0 #000;
						/* 黑色描边 */
					}
				}
			}
		}
	}
</style>